<template>
    <el-dialog v-model="addUserDialog" custom-class="user-dialog" title="用户" :show-close="false"
        :close-on-press-escape="false" :close-on-click-modal="false">
        <div style="height:60vh;overflow:auto;padding:0 12px;">
            <el-form ref="userForm" :rules="rules" :model="userInfo" label-width="80px">
                <el-form-item label="类型" prop="type">
                    <el-select v-model="userInfo.type" placeholder="请选择" :style="{ width: '100%' }">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="`${item.label}`"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input :disabled="dialogFlag === 'edit'" v-model="userInfo.userName" />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userInfo.name" />
                </el-form-item>
                <el-form-item v-if="dialogFlag === 'add'" label="密码" prop="password">
                    <el-input v-model="userInfo.password" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="userInfo.nickName" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="userInfo.phone" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userInfo.email" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="userInfo.sex" placeholder="请选择" :style="{ width: '100%' }">
                        <el-option v-for="item in sexOptions" :key="item.value" :label="`${item.label}`"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="生日" prop="birthday">
                    <!-- <el-input v-model="userInfo.birthday" /> -->
                    <el-date-picker v-model="userInfo.birthday" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        placeholder="请选择生日" />
                </el-form-item>
                <el-form-item label="住址" prop="address">
                    <el-input v-model="userInfo.address" />
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-select v-model="userInfo.state" placeholder="请选择" :style="{ width: '100%' }">
                        <el-option v-for="item in stateOptions" :key="item.value" :label="`${item.label}`"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="来源" prop="source">
                    <el-select disabled v-model="userInfo.source" placeholder="请选择" :style="{ width: '100%' }">
                        <el-option v-for="item in sourceOptions" :key="item.value" :label="`${item.label}`"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户角色" prop="roleIds">
                    <el-cascader v-model="userInfo.roleIdList" style="width:100%" :options="roleOptions"
                        :show-all-levels="false"
                        :props="{ multiple: true, checkStrictly: true, disabled: 'disabled', emitPath: false }"
                        :clearable="false" />
                </el-form-item>
                <el-form-item label="头像" label-width="80px">
                    <div style="display:inline-block" @click="openHeaderChange">
                        <img v-if="userInfo.headerImg" class="header-img-box"
                            :src="(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http') ? path + userInfo.headerImg : userInfo.headerImg">
                        <div v-else class="header-img-box">从媒体库选择</div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="small" @click="closeAddUserDialog">取 消</el-button>
                <el-button size="small" type="primary" @click="enterAddUserDialog">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
const userInfo = ref({
    username: '',
    password: '',
    nickName: '',
    headerImg: '',
    sex: 3,
    birthday: '',
    state: 1,
    source: 1,
    roleIds: '',
    roleIdList: [],
    sideMode: 'dark',
    activeColor: '#4D70FF',
    baseColor: '#fff'
})

const rules = ref({
    type: [
        { required: true, message: '请选择用户类型', trigger: 'blur' },
    ],
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 1, message: '最低1位字符', trigger: 'blur' },
        { max: 30, message: '最高30位字符', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, message: '最低2位字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入用户密码', trigger: 'blur' },
        { min: 6, message: '最低6位字符', trigger: 'blur' }
    ],
    nickName: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' }
    ]
})

const userForm = ref(null)
const enterAddUserDialog = async() => {
  userForm.value.validate(async valid => {
    if (valid) {
      const req = {
        ...userInfo.value
      }
	  if(req.birthday && req.birthday.length == 10){
		  req.birthday = req.birthday + "T00:00:00+08:00"
	  }
      if (dialogFlag.value === 'add') {
        const res = await saveUser(req)
        if (res.code === 0) {
          ElMessage({ type: 'success', message: '创建成功' })
          await getTableData()
          closeAddUserDialog()
        }
      }
      if (dialogFlag.value === 'edit') {
        const res = await saveUser(req)
        if (res.code === 0) {
          ElMessage({ type: 'success', message: '编辑成功' })
          await getTableData()
          closeAddUserDialog()
        }
      }
    }
  })
}

const addUserDialog = ref(false)
const closeAddUserDialog = () => {
  userForm.value.resetFields()
  userInfo.value.headerImg = ''
  userInfo.value.roleIdList = []
  addUserDialog.value = false
}
</script>
<style lang="scss" scoped></style>